혼자 공부하는 바이브 코딩 — 8장 MCP로 클로드 코드의 한계 넘어서기 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

8장에서 다루는 내용

• MCP의 개념과 클로드 코드 연결 — 외부 서비스와 AI를 연결하는 표준 프로토콜
• MCP로 완전 자동화 개발 환경 구축 — Playwright 테스트, Context7, 깃허브 MCP 연동
• 데이터베이스 연결해 진짜 서비스 만들기 — Vercel 배포, Supabase DB 연동

전체 흐름도

[08-1 MCP 이해 + 연결]       [08-2 완전 자동화]           [08-3 진짜 서비스]
    |                           |                           |
    v                           v                           v
+--------------------+   +------------------------+   +------------------------+
| MCP란?             |   | MCP 서버 찾기            |   | Vercel 배포             |
| = AI 확장 표준 규약  |   | * Context7 (문서 연결)   |   | = 깃허브 -> 자동 배포    |
|                    |   | * Playwright (자동 테스트)|   |                        |
| 원격 vs 로컬 MCP   |   |                        |   | Supabase DB 연동        |
| 클라이언트-서버 모델 |   | 쇼핑 리스트 앱 제작    |   | = 클라우드 데이터베이스  |
|                    |   | + Playwright 자동 테스트 |   |                        |
| 노션 MCP 연동      |   |                        |   | 쇼핑 리스트 ->           |
| Sequential Thinking|   | 깃허브 MCP 연동         |   | 진짜 서비스로 업그레이드 |
+--------------------+   | = 자동 커밋 + 푸시      |   +------------------------+
                          +------------------------+

핵심 키워드

08-1 MCP 이해하고 클로드 코드와 연결하기

한 줄 요약

MCP는 AI가 외부 데이터, 도구, 서비스와 연결될 때 사용하는 표준 프로토콜이며, 클로드 코드에 MCP를 연결하면 능력을 무한히 확장할 수 있다.

MCP가 열어준 AI의 무한 확장 가능성

API vs MCP 비교:

API:  특정 서비스 하나의 대화 창구
      웹 -> API -> API 서버
      (하나의 서비스에 하나의 연결)

MCP:  다양한 데이터, 도구를 AI가 한꺼번에 관리하는 표준 규격
      AI -> MCP -> MCP 서버들 (검색, DB, API...)
      (하나의 표준으로 여러 서비스 연결)

• API: 특정 기능을 요청하는 방식. AI 모델이 파일 시스템을 직접 조작하거나 DB를 수정할 수 없음
• MCP: AI가 직접 파일 시스템에 접근하고, DB를 조회하거나 수정할 수 있게 해주는 프로토콜
• 클로드 코드는 이미 MCP 클라이언트 기능을 내장하고 있어 설정만 하면 바로 사용 가능

클라이언트-서버 모델

클로드 코드                     MCP
   |                            |
   v                            v
[MCP 클라이언트] -> [MCP 서버 A] -> Search
                 -> [MCP 서버 B] -> Database
                 -> [MCP 서버 C] -> API

• 클로드 코드가 클라이언트로서 요청을 보내고, MCP 서버가 실제 작업을 처리
• 장점 1: 새로운 기능 추가 시 MCP 서버만 연결하면 됨 (쉬운 확장)
• 장점 2: 클로드 코드는 작업 지시만 하고 실행은 MCP 서버가 담당 (안정성)
• 주의: MCP 서버가 외부 파일이나 API에 접근하므로 보안 인증과 접근 권한 설정 필수

클로드 코드와 노션 연결하기 (실습)

MCP 서버 추가 3단계:
1. 터미널에서 claude mcp add 명령으로 MCP 서버 설치
2. 외부 서비스 연결 시 인증 과정 진행
3. 클로드 코드에서 해당 MCP 기능을 프롬프트로 사용

노션 MCP 설치 명령어:
> claude mcp add --transport http notion https://mcp.notion.com/mcp

설치 확인:
> /mcp  (클로드 코드 안에서)
-> notion 서버가 "connected"로 표시되면 성공!
-> 15개의 도구(notion-search, notion-create-pages 등) 사용 가능

노션 MCP로 자동 리서치 노트 만들기

프롬프트:
"클로드 코드의 업데이트, 변경 사항을 검색하고 요약해 줘.
 그 결과를 노션 MCP를 이용해 노션에 저장해 줘."

-> 클로드 코드가 자동으로:
  1. 최신 업데이트를 검색
  2. 내용을 요약
  3. 노션에 문서를 생성하여 저장

로컬 MCP와 원격 MCP 이해하기

원격 MCP 설치 명령어 구조:
> claude mcp add --transport http [내가 정한 이름] [서버 URL]

로컬 MCP 설치 명령어 구조:
> claude mcp add [이름] -s local -- cmd /c npx -y @조직명/패키지명@버전
                  |        |       |   |  |
                 이름    범위지정  구분자 실행  패키지

로컬 MCP 설치 명령어 상세 해부

claude mcp add sequential-thinking -s local -- cmd /c npx -y
  @modelcontextprotocol/server-sequential-thinking@latest

(1) sequential-thinking : MCP를 구분하기 위한 이름
(2) -s local : 현재 프로젝트에만 적용 (project, user도 가능)
(3) -- : 클로드 코드 옵션과 MCP 실행 명령의 구분자
(4) cmd /c : 윈도우에서 명령 실행 (맥/리눅스에서는 생략)
(5) npx -y : Node.js 패키지를 자동 설치 후 실행
(6) @modelcontextprotocol/server-sequential-thinking@latest : MCP 패키지명

Sequential Thinking MCP 활용

Sequential Thinking MCP란?
= 주어진 문제를 작은 단위로 분해해 순차적으로 추론하도록 돕는 도구

실습 프롬프트:
"내 웹 포트폴리오 방문자의 체류 시간을 지금의 2배로 늘리고 싶어.
 두 가지 문서를 작성해.
 1. 이 목표를 달성할 방법을 구성해서 노션 MCP를 이용해 '체류 시간 늘리기'로 저장해 줘.
 2. Sequential Thinking MCP를 이용해서 이 목표를 달성할 방법을 체계적으로 구상하고
    노션 MCP를 이용해 '체류 시간 늘리기 - 체계적 구상'으로 저장해 줘."

결과 비교:
- 일반 추론: 총 85줄
- 순차적 추론: 총 222줄 (목표, 실행 방법, 실행 로드맵, 측정 지표, 리스크 대응 등 상세)

핵심 체크포인트

• MCP = AI의 확장 플러그인 (레고 블록에 특별한 부품 추가하는 것)
• 클라이언트-서버 구조: 클로드 코드(클라이언트) -> MCP 서버(실제 작업 수행)
• 원격 MCP는 URL로 연결, 로컬 MCP는 실행 명령어로 연결
• -- 구분자로 클로드 코드 옵션과 MCP 실행 명령을 분리

08-2 MCP로 구현하는 완전 자동화 개발 환경

한 줄 요약

Context7과 Playwright MCP로 최신 문서 참조와 자동 테스트를 구축하고, 깃허브 MCP로 버전 관리까지 자동화하는 완전 자동화 개발 환경을 만든다.

원하는 MCP를 찾는 방법

MCP 서버를 찾는 두 가지 효과적인 방법:

1. 구글 검색 — "Context7 MCP", "Playwright MCP" 등으로 검색
   -> 깃허브 저장소에서 설치 방법 확인

2. 깃허브 저장소 탐색 — 대부분의 MCP가 오픈소스로 공개
   -> README의 설치 안내를 따라 설치

TIP: 카테고리별로 분류해 비교 탐색할 수 있는 플랫폼도 참고

Context7 MCP — 최신 문서 연결 도구

Context7이란?
= AI 개발 툴이 항상 최신 문서를 참고하도록 돕는 지식 연결 도구

설치 과정:
1. context7.com에서 회원가입 + API 키 발급
2. 깃허브에서 설치 명령어 확인
   (원격 또는 로컬 방식 선택 가능)
3. 클로드 코드에 설치

원격 설치 명령어:
> claude mcp add --transport http context7 https://mcp.context7.com/mcp
  --header "CONTEXT7_API_KEY: ctx7sk-..."

Playwright MCP — 웹 자동 테스트 도구

Playwright란?
= 마이크로소프트가 만든 웹 애플리케이션 자동 테스트 도구
= 브라우저를 자동으로 열고, 버튼 클릭, 텍스트 입력, 결과 확인까지 수행

설치 명령어:
> claude mcp add playwright -s local -- cmd /c npx @playwright/mcp@latest

명령어 해부:
(1) claude mcp add : MCP 서버 추가 명령
(2) playwright : 설치할 MCP 이름
(3) npx : Node.js 패키지 실행
(4) @playwright/mcp@latest : Playwright MCP 패키지 최신 버전

쇼핑 리스트 앱 만들고 자동 테스트하기

Step 1: 쇼핑 리스트 앱 만들기
프롬프트: "쇼핑 리스트 앱을 만들어 줘. 아이템 추가, 삭제, 체크 기능이 있는
          간단한 웹 UI로 로컬 브라우저에서 실행되게 해 줘."
-> shopping-list.html 파일 생성

Step 2: Playwright MCP로 자동 테스트
프롬프트: "Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을
          자동으로 테스트해 줘. 아이템 추가, 삭제, 체크 기능이
          제대로 작동하는지 확인해 줘."

-> 클로드 코드가 Playwright MCP를 통해:
  1. 브라우저 자동 실행 (HTML 파일 열기)
  2. 입력창에 '사과' 입력 -> 추가 버튼 클릭
  3. '우유', '빵' 등 추가 아이템 테스트
  4. 체크박스 클릭 -> 취소 -> 재확인
  5. 삭제 버튼 클릭 -> 아이템 제거 확인
  6. 스크린샷 촬영 -> .playwright-mcp/ 폴더에 저장

깃허브 MCP로 프로젝트 영구 보관하기

깃허브 = 전 세계 코드 버전 관리 플랫폼

깃허브와 Git 명령어 이해하기:
작업공간 -> (add) -> 준비공간 -> (commit) -> 로컬 저장소 -> (push) -> 원격 저장소
                                                           <- (pull) <-

(1) 추가(add): 변경 파일을 준비 공간(staging area)에 올림
(2) 커밋(commit): 준비된 파일을 로컬 저장소에 보관 (변경 단위 기록)
(3) 푸시(push): 로컬 저장소의 커밋을 원격 저장소(깃허브)에 업로드

깃허브 MCP 설치

1. 깃허브 API 토큰 발급:
   Settings -> Developer settings -> Personal access tokens (classic)
   -> Generate new token (classic)
   -> repo, user, project 권한 선택
   -> 30일 유효기간 설정 -> 토큰 생성 및 복사

2. 깃허브 MCP 설치 명령어:
> claude mcp add --transport http github https://api.githubcopilot.com/mcp
  -H "Authorization: Bearer <깃허브 API 토큰>"

3. 프로젝트 업로드 프롬프트:
"현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶어.
 github mcp를 사용해서 shopping-list-app이라는 저장소를 만들고 업로드해 줘."

-> 클로드 코드가 자동으로:
  git init -> git add -> git commit -> git push 수행

핵심 체크포인트

• Context7 = 최신 문서 참조 MCP, Playwright = 웹 자동 테스트 MCP
• MCP 검색 방법: 구글 검색 + 깃허브 저장소 탐색
• Playwright가 브라우저를 자동 조작해 아이템 추가/삭제/체크 테스트 수행
• 깃허브 MCP로 add -> commit -> push 전 과정을 AI가 자동 처리

08-3 데이터베이스 연결해 진짜 서비스 만들기

한 줄 요약

Vercel로 웹 앱을 배포하고 Supabase로 데이터베이스를 연동하여, 로컬 환경의 쇼핑 리스트를 누구나 접속할 수 있는 진짜 서비스로 업그레이드한다.

배포(Deploy)란?

로컬 환경 (개발)                 배포 후 (운영)
+--------------+              +------------------+
| 내 컴퓨터에서 |              | 인터넷에 연결된   |
| 만 실행됨     |   ->배포->   | 외부 서버에서     |
| 컴퓨터 꺼지면 |              | 24시간 실행       |
| 앱도 종료     |              | 누구나 URL로 접속 |
+--------------+              +------------------+

Vercel 계정 만들고 깃허브 연결하기

Vercel의 작업 흐름:
(1) 깃허브 저장소 준비
(2) 로컬 환경에서 작성한 HTML 파일을 깃허브에 푸시
(3) Vercel에 깃허브 인증 허가 후 배포할 저장소 선택
(4) 즉시 URL 발급 -> 누구나 접속 가능!

가입 절차:
1. vercel.com -> [Sign Up]
2. Plan Type: 개인 프로젝트 선택
3. [Continue with GitHub] -> 깃허브 계정 연동
4. Dashboard에서 [Add New] -> [Project]
5. Import Git Repository -> shopping-list-app 선택
6. [Deploy] 클릭 -> 자동 배포 완료!

404 Not Found 해결하기

문제: 배포 후 "404 Not Found" 오류 발생
원인: Vercel이 기본 시작 파일로 'index.html'을 찾는데,
      쇼핑 리스트 앱은 'shopping-list.html'이라는 이름으로 만들었기 때문

해결 프롬프트:
"쇼핑 리스트 앱의 shopping-list.html 파일을 index.html로 수정해서
 깃허브에 업로드해 줘."

-> 파일명 변경 후 깃허브에 커밋 + 푸시
-> Vercel이 자동으로 재배포
-> 정상 접속 확인!

로컬 스토리지의 한계

로컬 스토리지 (localStorage):
- 데이터가 해당 브라우저에만 저장됨
- 다른 컴퓨터, 다른 브라우저에서는 데이터 공유 불가
- 시크릿 모드에서는 빈 데이터만 표시
- 브라우저 캐시를 지우면 데이터 소멸

해결책: 클라우드 데이터베이스 (Supabase)
- 어디서나 동일한 데이터 접근 가능
- 여러 사용자 간 데이터 공유
- 서버가 데이터를 영구 보관

Supabase — 클라우드 데이터베이스 플랫폼

Supabase란?
= 데이터베이스 구축을 자동화해 주는 클라우드 DB 플랫폼
= 회원가입만 하면 별도 설치 없이 DB를 만들 수 있음
= API가 자동 생성되어 직접 서버 코드를 작성할 필요 없음

기존 방식 vs Supabase:
기존: Oracle/MySQL 설치 -> 서버 설정 -> 보수 관리 (복잡, 시간 소요)
Supabase: 가입 -> 프로젝트 생성 -> API 자동 제공 (간단, 즉시 사용)

Supabase 가입하고 조직 생성하기

1. supabase.com -> [Sign in] -> GitHub 계정으로 가입
2. [New organization] -> 조직 생성
   - Name: HonGongVibeCoding's Org
   - Type: Personal
   - Plan: Free ($0/month) — 무료 플랜으로 프로젝트 2개까지
3. 프로젝트 자동 생성 -> 대시보드 진입

Supabase MCP 서버 설치와 API 토큰 발급

API 토큰 발급:
1. Supabase 시작 페이지 -> [Account preferences]
2. [Access Tokens] -> [Generate new token]
3. Name: my_first_project, 유효기간 30일 -> [Generate token]
4. 토큰 복사 후 안전한 곳에 저장

Supabase MCP 설치 명령어:
> claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=<토큰>
  -- cmd /c npx -y @supabase/mcp-server-supabase@latest

명령어 해부:
- -e SUPABASE_ACCESS_TOKEN=<토큰> : 환경 변수로 API 토큰 전달 (-e는 --env 축약)
- @supabase : Supabase사가 만든 MCP 패키지
- mcp-server-supabase@latest : 최신 버전의 Supabase MCP 서버

쇼핑 리스트 앱 진짜 서비스로 업그레이드

프롬프트:
"Supabase mcp를 이용해서 우리의 쇼핑 리스트 앱을 데이터베이스와 연동해 줘.
 shopping_items라는 테이블을 만들고,
 현재 로컬 스토리지에 저장되던 데이터를 Supabase 데이터베이스에 저장하도록
 코드를 수정해 줘. 수정이 완료되면 깃허브에 commit하고 push해 줘."

-> 클로드 코드가 자동으로:
  1. Supabase에 "shopping-list-app" 프로젝트 생성
  2. shopping_items 테이블 생성 (id, name, completed, created_at 열)
  3. index.html 코드 수정: localStorage -> Supabase SDK 연동
  4. 깃허브에 커밋 + 푸시
  -> Vercel이 자동 재배포
  -> 어떤 기기에서든 동일한 쇼핑 리스트 접근 가능!

데이터베이스 테이블 이해하기

데이터베이스의 테이블 = 엑셀 시트와 같은 구조

shopping_items 테이블 예시:
| id | name | completed | created_at          |
|----|------|-----------|---------------------|
| 1  | 사과 | False     | 2025-10-29 15:30:00 |
| 2  | 우유 | True      | 2025-10-29 15:32:10 |
| 3  | 빵   | false     | 2025-10-29 15:35:22 |

- 데이터베이스 = 여러 엑셀 파일을 관리하는 프로그램
- 테이블 = 데이터베이스 안에 있는 개별 엑셀 시트

데이터베이스 실시간 동기화 확인

테스트 과정:
1. 쇼핑 리스트 앱에서 '사과' 추가 -> Supabase Table Editor에서 행 추가 확인
2. 체크박스 클릭 -> completed 열이 TRUE로 변경
3. 아이템 삭제 -> Supabase 테이블에서도 행 삭제 확인
4. 다른 브라우저/시크릿 모드에서 접속 -> 동일한 데이터 확인!

전체 서비스 구조 완성:
쇼핑 리스트 앱 (index.html)
    | Supabase SDK (API 통신)
Supabase 클라우드 DB (shopping_items 테이블)
    | 자동 배포
Vercel (인터넷에 24시간 운영)
    | 버전 관리
깃허브 (코드 저장소)

핵심 체크포인트

• Vercel = 깃허브 코드를 자동 빌드 + 배포하는 클라우드 플랫폼
• 로컬 스토리지는 해당 브라우저에만 데이터 저장 (다른 기기/브라우저에서 접근 불가)
• Supabase = 클라우드 DB 플랫폼 (가입만 하면 API 자동 생성)
• 쇼핑 리스트 앱이 localStorage -> Supabase DB로 업그레이드되어 진짜 서비스 완성

연습문제 풀이

Q1: MCP와 API의 차이점으로 가장 적절한 설명은?

A: API는 특정 기능을 요청하는 방식이고, MCP는 AI가 외부 시스템과 직접 소통하게 하는 프로토콜이다. MCP를 사용하면 AI가 직접 파일 시스템에 접근하고, 데이터베이스를 조회하거나 수정할 수 있다.

Q2: Playwright MCP가 테스트 완료 후 생성하는 폴더 이름은?

A: .playwright-mcp 폴더가 생성되며, 안에 스크린샷 파일이 저장된다. 이를 통해 테스트 결과를 기록하고 실제 화면을 보고할 때 유용하게 쓸 수 있다.

Q3: 깃허브에 코드를 업로드하는 순서는?

A: add -> commit -> push 순서이다. 먼저 변경 파일을 준비 공간에 추가(add)하고, 로컬 저장소에 보관(commit)한 뒤, 원격 저장소에 업로드(push)한다.

Q4: Vercel 배포 시 404 에러가 발생한 이유와 해결 방법은?

A: Vercel이 기본 시작 파일로 index.html을 찾는데, 앱 파일명이 shopping-list.html이었기 때문이다. 파일명을 index.html로 변경하면 해결된다.

Q5: 로컬 스토리지와 클라우드 데이터베이스의 가장 큰 차이점은?

A: 로컬 스토리지는 해당 브라우저에만 데이터가 저장되어 다른 기기에서 접근할 수 없지만, 클라우드 데이터베이스는 여러 기기에서 데이터를 공유할 수 있다.

부록 A: 용어 사전

부록 B: 핵심 비교표

부록 C: 추천 참고 자료 & 링크